<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="/commons/taglibs.jsp" %>

<title><fmt:message key="AcctUser.title"/></title>
<menu><fmt:message key="menu.system.title"/></menu>
<submenu><fmt:message key="menu.user.title"/></submenu>
<script src="${ctx}/assets/js/bootstrap-paginator.min.js"></script>


<script>
$(".yhgl").addClass("active").parent("ul").parent("li").addClass("active open");
jQuery(function($) {
	addCustomPaginator('#pagination','#queryForm','#sortColumns','#page', "${query.page}","${page.totalPages}","allOrder");
	changeSort("#queryForm","#dynamic-table",'#sortColumns','#page');
	initialTableSort("#dynamic-table",'#sortColumns');
	deleteOne(".deleteButton","${ctx}/acctUser/json/delete");
	addPopup("#addButton",'${ctx}/acctUser/popup/create','<fmt:message key="navigation.title.create"/> <fmt:message key="AcctUser.title"/>',1000,600)
	editPopup(".editButton","${ctx}/acctUser/popup/create",'<fmt:message key="navigation.title.edit"/> <fmt:message key="AcctUser.title"/>',400,600)
	checkAllRecord("#checkAll",".checkitems")
	deleteAll("#deleteAllButton","${ctx}/acctUser/json/deleteAll","items","Please select at least one item to delete");
	addDatePicker(".inputdate")
})
</script>
<custom:message/>
<form:form action="${ctx }/acctUser/list" modelAttribute="query" id="queryForm" name="queryForm" method="post">
<div class="row">
	
		<div class="widget-header widget-header-small">
			<h5 class="lighter">Search Form</h5>
		</div>

			<div class="form-group">
				<label class="control-label no-padding-right col-md-2 col-xs-4 col-sm-2"><fmt:message key="AcctUser.loginName.title"/> </label> 
				<div class="col-md-4 col-xs-8 col-sm-4"> 
					<form:input path="loginName" id="loginName" cssClass="form-control" maxlength="45" class=""/> 
				</div>
			</div>
			<div class="form-group"> 
				<label class="control-label no-padding-right col-md-2 col-xs-4 col-sm-2"><fmt:message key="AcctUser.userName.title"/> </label>
				<div class="col-md-4 col-xs-8 col-sm-4"> 
					<form:input path="userName" id="userName" cssClass="form-control" maxlength="250" class=""/> 
				</div>
			</div>
			<div class="form-group"> 
				<label class="control-label no-padding-right col-md-2 col-xs-4 col-sm-2"><fmt:message key="AcctUser.lastLoginDate.title"/> </label>
				<div class="col-md-3 col-xs-8 col-sm-4"> 
					<div class="input-group date inputdate" data-date-format="dd/mm/yyyy">
						<span class="input-group-addon">From</span>
						<form:input path="lastLoginDateBegin" cssClass="form-control" maxlength="250" readonly="true"/> 
						<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
						<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
					</div>
					<div class="input-group date inputdate" data-date-format="dd/mm/yyyy">
						<span class="input-group-addon">to  </span>
						<form:input path="lastLoginDateEnd" cssClass="form-control" maxlength="250" readonly="true"/> 
						<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
					</div>
				</div>
			</div>
			
			<div class="form-group">
				<div class="col-md-offset-2 col-md-9">
					<button class="btn btn-primary radius-4" onclick="getReferenceForm(this).action='${ctx}/acctUser/list'">
						<i class="ace-icon fa fa-search nav-search-icon"></i>
						<fmt:message key="navigation.button.query"/>
					</button>
				</div>
			</div>
</div>
		
		<div class="row">
			<div class="col-xs-12">
				<div class="table-header">
				Search Result
				</div>
				<div>
					<table id="dynamic-table" class="table table-responsive table-striped table-bordered table-hover dataTable">
						<thead>
							<tr>
								<th style="width:1px;"> </th>
								<th style="width:1px;"><input type="checkbox" id="checkAll"></th>								
								<th class="sorting" data-name="loginName"><fmt:message key="AcctUser.loginName.title"/> </th>
								<th class="sorting" data-name="userName"><fmt:message key="AcctUser.userName.title"/> </th>
								<th class="sorting" data-name="gender"><fmt:message key="AcctUser.gender.title"/> </th>
								<th class="sorting" data-name="mobilePhone"><fmt:message key="AcctUser.mobilePhone.title"/> </th>
								<th class="sorting" data-name="homePhone"><fmt:message key="AcctUser.homePhone.title"/> </th>
								<th class="sorting" data-name="workPhone"><fmt:message key="AcctUser.workPhone.title"/> </th>
								<th class="sorting" data-name="lastLoginDate"><fmt:message key="AcctUser.lastLoginDate.title"/> </th>
								<th><fmt:message key="AcctUser.systemId.title"/> </th>
								<th><fmt:message key="navigation.label.operation"/></th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${page.content}" var="item" varStatus="status">
								<tr>
									<td data-label="序号">${page.number * page.size + status.index + 1}</td>
									
									<td>
									<c:if test="${item.id != sessionScope['UserSessionInfo'].acctUser.id }">
									<input type="checkbox" name="items" value="id=${item.id}&">
									</c:if>
									</td>
									
									<td data-label="<fmt:message key="AcctUser.loginName.title"/>"><c:out value='${item.loginName}'/>&nbsp;</td>
									<td data-label="<fmt:message key="AcctUser.userName.title"/>"><c:out value='${item.userName}'/>&nbsp;</td>
									<td data-label="<fmt:message key="AcctUser.gender.title"/>"><c:out value='${genderMap[item.gender]}'/>&nbsp;</td>
									<td data-label="<fmt:message key="AcctUser.mobilePhone.title"/>"><c:out value='${item.mobilePhone}'/>&nbsp;</td>
									<td data-label="<fmt:message key="AcctUser.homePhone.title"/>"><c:out value='${item.homePhone}'/>&nbsp;</td>
									<td data-label="<fmt:message key="AcctUser.workPhone.title"/>"><c:out value='${item.workPhone}'/>&nbsp;</td>
									<td data-label="<fmt:message key="AcctUser.lastLoginDate.title"/>"><c:out value='${item.lastLoginDate}'/>&nbsp;</td>
									<td data-label="<fmt:message key="AcctUser.systemId.title"/>"><c:out value='${systemMap[item.systemId].systemName}'/>&nbsp;</td>
									<td data-label="<fmt:message key="navigation.label.operation"/>">
										<div class="action-buttons">
											<a class="green editButton" id="editButton-${item.id }">
												<i class="ace-icon fa fa-pencil bigger-130"></i>
											</a>
											<c:if test="${item.id != sessionScope['UserSessionInfo'].acctUser.id }">
											<a class="red" class="deleteButton" id="deleteButton-${item.id }">
												<i class="ace-icon fa fa-trash-o bigger-130"></i>
											</a>
											</c:if>
										</div>						
									</td>
								  </tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
				<div class="ui-pager-control"  style="background-color:#EFF3F8">
					<table class="ui-pg-table ui-common-table ui-pager-table ">
						<tr>
							<td class="ui-pg-button ui-corner-all">
								<div class="ui-pg-div">
									<a id="addButton">
										<span class="ui-icon ace-icon fa fa-plus-circle purple"></span>
									</a>
								</div>
							</td>
							<td class="ui-pg-button ui-corner-all">
								<div class="ui-pg-div">
									<a id="deleteAllButton">
										<span class="ui-icon ace-icon fa fa-trash-o red"></span>
									</a>
								</div>
							</td>							
						</tr>
					</table>
					
				</div>
				<div class="clearfix">
					<input type="hidden" name="sortColumns" id="sortColumns" value="${query.sortColumns}" />
					<input type="hidden" name="page" id="page" value="${query.page}" />
					<c:if test="${page.totalPages > 1}">
					<div class=" pull-right">
						<ul id="pagination"></ul>
					</div>
					</c:if>
				</div>
				
			</div>
		</div>
	

</form:form>